<template>
	<view class="contaniner mall">
		<view class="mall-head"></view>
		<view class="list">
			<view class="li" v-for="item in 21" :key="item">
				<image class="goodImg"></image>
				<view class="goodInfo">
					<view class="goodName overflowText1">阿萨德黑科技阿达阿达哇塞的阿萨德</view>
					<view class="goodSku overflowText1">阿达阿斯顿请问阿萨德啊恶趣味</view>
					<view class="goodPrice">
						<text class="goodUnit">￥</text>
						89.90
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	.mall{
		width: 100%;
		min-height: 100vh;
		background-color: #617E16;
		padding:0 20rpx;
		box-sizing: border-box;
		.mall-head{
			height: 200rpx;
		}
		.list{
			padding:0 20rpx;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			background-color: #f2f2f2;
			.li{
				width: 165px;
				height: 220px;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				.goodImg{
					width: 165px;
					height: 144px;
					border-radius: 16rpx 16rpx 0 0;
					background-color: #FF1D1D;
				}
				.goodInfo{
					padding: 6rpx 8rpx 22rpx;
					box-sizing: border-box;
					.goodName{
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #000000;
						line-height: 32rpx;
						
					}
					.goodSku{
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 20rpx;
						color: #999999;
						line-height: 32rpx;
						margin-bottom: 4rpx;
					}
					.goodPrice{
						font-family: DIN BlackAlternate;
						font-weight: blod;
						font-size: 36rpx;
						color: #FF1D1D;
						.goodUnit{
							height: 17px;
							font-family: PingFang SC;
							font-weight: blod;
							font-size: 24rpx;
							color: #FF1D1D;
							line-height: 16px;
						}
					}
				}
			}
		}
	}
</style>